<template>
	<view class="header" :class="bottom == true ? 'bottom' : ''">
		<view class="fz18 h-left">
			<text class="iconfont icon-left left-icon" v-if="leftIcon == 'back'" @click="back"></text>
			<view class="leftText">{{leftText}}</view>
		</view>
		<view class="fz18 h-c tc">{{title}}</view>
		<view class="fz18 h-right">
			<!-- <image class="right-icon" src=""></image> -->
			<view class="rightText">{{rightText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {	
			};
		},
		props: {
		    /**
		     * 标题文字
		     */
				leftIcon: {
					type: String,
					default: ''
				},
		    title: {
		        type: String,
		        default: ''
		    },
		    /**
		     * 左侧按钮文本
		     */
		    leftText: {
		        type: String,
		        default: ''
		    },
		    /**
		     * 右侧按钮文本
		     */
		    rightText: {
		        type: String,
		        default: ''
		    },
		    /**
		     * 按钮图标和文字颜色
		     */
		    color: {
		        type: String,
		        default: '#000000'
		    },
		    /**
		     * 背景颜色
		     */
		    backgroundColor: {
		        type: String,
		        default: '#FFFFFF'
		    },
				bottom: {
						type: Boolean
				}
		},
		methods: {
			back () {
				this.$emit('back', '')
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.header{
		width: 100%;
		height: 88upx;
		// border-bottom: 1upx solid #e6e6e6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24upx;
		left: 0;
		top:0;
		box-sizing: border-box;
		position: fixed;
		z-index: 200;
		background: #fff;
		&.bottom{
			border-bottom-color: transparent;
		}
		.h-left{
			// width: 100upx;
			height: 100%;
			display: flex;
			align-items: center;
			.left-icon{
				width: 40upx;
				height: 42upx;
			}
		}
		.h-right{
			// width: 100upx;
			height: 100%;
			display: flex;
			align-items: center;
			.right-icon{
				width: 40upx;
				height: 42upx;
			}
		}
	}

</style>
